import React, { useEffect, useState } from 'react';
import { Modal, Table } from 'antd';
import { getComponentData } from 'src/services/AnalyseManage';
import { DL_TYPE, WD_TYPE } from '../EditorDataType/EnumConfig';

// const dataSource = [
// 	{
// 	  key: '1',
// 	  porduct_classify: '办公用品',
// 	  quanlity: 32,
// 	},
// 	{
// 		key: '2',
// 		porduct_classify: '技术',
// 		quanlity: 44,
// 	},
// ];

// const columns = [
// 	{
// 	  title: '类别',
// 	  dataIndex: 'porduct_classify',
// 	  key: 'porduct_classify',
// 	},
// 	{
// 	  title: '数量',
// 	  dataIndex: 'quanlity',
// 	  key: 'quanlity',
// 	},
// ];

const DetailModal = ( props: any ) => {
	const { modalVisible, cancelHandle, currentConfig } = props;
	const [ columns, setColums ] = useState( [] );
	const [ dataSource, setDataSource ] = useState( [] );

	const itemInfo = ( v ) => {
		return {
			aggregateType: v.modelType === DL_TYPE ? v.aggregateType : '', //	度量的聚合类型
			formatType: v.modelType === WD_TYPE ? v.formatType : '', // 维度的聚合类型v.
			alias: '',
			dataType: v.dataType,
			frontendId: '',
			id: v.dataIndex,
			orderType: v.orderType, // 排序方式
			quota: v.modelType === WD_TYPE ? 'WD' : 'DL',
			symbol: '',
			type: v.type,
			value: '',
		};
	};

	//	如果是日期类型，就返回日期类型，否则返回空
	const isDateType = ( dataType ) => {
		const dateType = [ 'DATE', 'DATETIME', 'TIMESTAMP', 'TIME', 'YEAR' ];
		if ( dateType.some( v => v.toLowerCase() === dataType.toLowerCase() ) ) {
			return 'YEAR_QUARTERLY';
		} else {
			return '';
		}
	};

	const buildColumnData = ( arr ) => {
		return arr.map( t => {
			return {
				title: t.title,
				dataIndex: t.dataIndex,
				key: t.dataIndex,
				sorter: ( a, b ) => {
					const tempA = a[t.dataIndex];
					const tempB = b[t.dataIndex];
					if ( typeof tempA === 'number' ) {
						return tempA - tempB;
					} else {
						return tempA.localeCompare( tempB );
					}
				}
			};
		} );
	};

	// eslint-disable-next-line max-statements
	const getTableData = async () => {
		// console.log( currentConfig );
		if ( currentConfig ) {
			const { xAxis = [], yLAxis = [], series = [], pieDimension = [], pieMeasure = [],
				chartScatterXColumns = [], chartScatterYColumns = [], chartScatterColorColumns = [], 
				chartScatterNameColumns = [], chartScatterSizeColumns = [], yAxis = [],
				chartCharField = [], chartCharSize = [], 
				// measure = [], valueFields = [], chartTargetColumns = [], chartMeasureColumns = [], 
				chartLineXColumns = [],
				chartLineYColumns = [], chartLineColorColumns = [], chartLineRYColumns = [],
				chartLineLYColumns = [], yRAxis = [], bubbleSize = [] } = currentConfig.data;
			// console.log( currentConfig.data );
			let request = {};
			// 内部筛选 condition
			const filterFieldCondition = currentConfig.data.filterFields
				? currentConfig.data.filterFields.map( ( v ) => v.filterConditions ).flat()
				: [];

			// 筛选组件的 condition
			let filterCompConditions = currentConfig.data.filterConditions || {};
			let newFilterCompConditions = [];
			Object.keys( filterCompConditions ).forEach( ( key ) => {
				newFilterCompConditions = newFilterCompConditions.concat( filterCompConditions[key] );
			} );

			// 柱状图
			if ( currentConfig.type === 'Column' && xAxis.length && yLAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yLAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							// conditions: filterFieldCondition.concat( state.dependencies, newFilterCompConditions ),
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'simple'
					},
					type: 'column',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					let { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yLAxis )
								.concat( buildColumnData( series ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( ( currentConfig.type === 'Pie' || currentConfig.type === 'Circle' ) && pieDimension.length && pieMeasure.length ) {
			// 饼图
				const x = pieDimension.concat( pieMeasure ).map( v => {
					return {
						aggregateType: v.modelType === DL_TYPE ? v.aggregateType : '',	//	度量的聚合类型
						formatType: v.modelType === WD_TYPE ? isDateType( v.dataType ) : '',	// 维度的聚合类型
						alias: '',
						dataType: v.dataType,
						frontendId: '',
						id: v.dataIndex,
						orderType: v.orderType,	//	排序方式
						quota: v.modelType === WD_TYPE ? 'WD' : 'DL',
						symbol: '',
						type: v.type,
						value: ''
					};
				} );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							// conditions: filterFieldCondition.concat( state.dependencies, newFilterCompConditions ),
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'pie'
					},
					type: 'graphics',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					let { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( pieDimension )
							.concat( buildColumnData( pieMeasure ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'Scatter' && chartScatterXColumns.length && chartScatterYColumns.length ) {
				const x = chartScatterXColumns.map( v => itemInfo( v ) );
				const y = chartScatterYColumns.map( v => itemInfo( v ) );
				const category = chartScatterColorColumns.map( v => itemInfo( v ) );
				const name = chartScatterNameColumns.map( v  => itemInfo( v ) )[0];
				const size = chartScatterSizeColumns.map( ( v ) => itemInfo( v ) )[0];

				const request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							customParams: {
								scatterName: name && name,
								scatterSize: size && size,
								viewDetail: true
							},
							tableName: currentConfig.data.tableCode,
							x: x,
							y: y,
							category: category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
						},
						needAutoRefresh: true,
						tableType: 'scatter',
					},
					type: 'bar',
					tenantCode: props.tenantCode
				};
	
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data && pageResponse.data.success ) {
					let { rows } = pageResponse.data.data;
					const colums = buildColumnData( chartScatterXColumns )
						.concat( buildColumnData( chartScatterYColumns ) )
						.concat( buildColumnData( chartScatterColorColumns ) )
						.concat( buildColumnData( chartScatterNameColumns ) )
						.concat( buildColumnData( chartScatterSizeColumns ) );
					setColums( colums );
					setDataSource( rows );
				}
			} else if ( currentConfig.type === 'RadarChart' && xAxis.length && yAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				const request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'radar'
					},
					type: 'bar',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					const { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yAxis ) )
							.concat( buildColumnData( series ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'WordCloud' && chartCharSize.length && chartCharField.length ) {
				const x = chartCharField.map( ( v ) =>  itemInfo( v ) );
				const y = chartCharSize.map( ( v ) =>  itemInfo( v ) );
				const request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x: x,
							y: y,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'cloud',
					},
					type: 'word',
					tenantCode: props.tenantCode
				};
	
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data && pageResponse.data.success ) {
					let { rows } = pageResponse.data.data;
					const colums = buildColumnData( chartCharField )
						.concat( buildColumnData( chartCharSize ) );
					setColums( colums );
					setDataSource( rows );
				}
			} else if ( currentConfig.type === 'Line' && chartLineXColumns.length && chartLineYColumns.length ) {
				const x = chartLineXColumns.map( ( v ) => itemInfo( v ) );
				const y = chartLineYColumns.map( ( v ) => itemInfo( v ) );
				const category = chartLineColorColumns.map( ( v ) => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x: x,
							y: y,
							category: category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'simple',
					},
					type: 'line',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data && pageResponse.data.success ) {
					const { rows = [], } = pageResponse.data.data;
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( chartLineXColumns )
							.concat( buildColumnData( chartLineYColumns )
								.concat( buildColumnData( chartLineColorColumns ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'DoubleYLine' && ( chartLineXColumns.length || chartLineRYColumns.length ) ) {
				const x = chartLineXColumns.map( ( v ) => itemInfo( v ) );
				const y = chartLineLYColumns.map( ( v ) => itemInfo( v ) );
				const y2Columns = chartLineRYColumns.map( ( v ) =>  itemInfo( v ) );
				const category = chartLineColorColumns.map( ( v ) => itemInfo( v ) );
				const request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x: x,
							y: y,
							y2: y2Columns,
							category: category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'double',
					},
					type: 'line',
					tenantCode: props.tenantCode
				};
	
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data && pageResponse.data.success ) {
					let { rows = [] } = pageResponse.data.data;
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( chartLineXColumns )
							.concat( buildColumnData( chartLineLYColumns )
								.concat( buildColumnData( chartLineRYColumns ) ) 
								.concat( buildColumnData( chartLineColorColumns ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'Column' && xAxis.length && yLAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yLAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'simple'
					},
					type: 'column',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					let { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						let { rows = [] } = pageResponse.data.data || {};
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yLAxis )
								.concat( buildColumnData( series ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'ColumnLine' && xAxis.length && ( yLAxis.length || yRAxis.length ) ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yLAxis.map( v => itemInfo( v ) );
				const y2 = yRAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							y2,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'dual'
					},
					type: 'column',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					let { rows = [] } = pageResponse.data.data || {};
					const colums = buildColumnData( xAxis )
						.concat( buildColumnData( yLAxis )
							.concat( buildColumnData( yRAxis ) ) 
							.concat( buildColumnData( series ) ) );
					setColums( colums );
					setDataSource( rows );
				}
			} else if ( currentConfig.type === 'StackedColumn' && xAxis.length && yLAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yLAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'stack'
					},
					type: 'column',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					let { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yLAxis )
								.concat( buildColumnData( series ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'Area' && chartLineXColumns.length && chartLineYColumns.length ) {
				const x = chartLineXColumns.map( ( v ) => itemInfo( v ) );
				const y = chartLineYColumns.map( ( v ) => itemInfo( v ) );
				const category = chartLineColorColumns.map( ( v ) => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x: x,
							y: y,
							category: category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'area',
					},
					type: 'line',
					tenantCode: props.tenantCode
				};
	
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data && pageResponse.data.success ) {
					const { rows = [] } = pageResponse.data.data;
					const colums = buildColumnData( chartLineXColumns )
						.concat( buildColumnData( chartLineYColumns )
							.concat( buildColumnData( chartLineColorColumns ) ) );
					setColums( colums );
					setDataSource( rows );
				}
			} else if ( currentConfig.type === 'MapFill' && xAxis.length && yAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yAxis.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'fill'
					},
					type: 'map',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					const { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yLAxis )
								.concat( buildColumnData( series ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			} else if ( currentConfig.type === 'MapBubble' && xAxis.length && yAxis.length ) {
				const x = xAxis.map( v => itemInfo( v ) );
				const y = yAxis.map( v => itemInfo( v ) );
				const customParams = bubbleSize.map( v => itemInfo( v ) );
				const category = series.map( v => itemInfo( v ) );
				request = {
					dataConfig: {
						dataModel: {
							pageId: props.pageId,
							tableName: currentConfig.data.tableCode,
							x,
							y,
							category,
							conditions: filterFieldCondition.concat( newFilterCompConditions ),
							customParams: { symbolSize: customParams[0], viewDetail: true }
						},
						needAutoRefresh: true,
						tableType: 'symbol'
					},
					type: 'map',
					tenantCode: props.tenantCode
				};
				let pageResponse = await getComponentData( request );
				if ( pageResponse.data ) {
					const { rows = [] } = pageResponse.data.data || {};
					if ( pageResponse.data.success && rows && rows.length > 0 ) {
						const colums = buildColumnData( xAxis )
							.concat( buildColumnData( yLAxis )
								.concat( buildColumnData( bubbleSize ) )
								.concat( buildColumnData( series ) ) );
						setColums( colums );
						setDataSource( rows );
					}
				}
			}
		}
	};

	useEffect( () => {
		if ( modalVisible ) {
			getTableData();
		}
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [ modalVisible ] );

	return <div>
		<Modal
			destroyOnClose
			title="详细信息"
			visible={modalVisible}
			width={'50%'}
			onCancel={() => cancelHandle()}
			footer={[ null, null ]}
		>
			<Table rowKey={() => Math.random()}  dataSource={dataSource} columns={columns} scroll={{ y: 400 }} />
		</Modal>
	</div>;
};

export default React.memo( DetailModal );